<!DOCTYPE HTML>
<html>

<head>
    <title>Agora Open Duo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <div class="container" id="parent-wrapper">
        <div id="media-container" class="d-flex justify-content-center">
            <div class="toolbar">
                <div style="position: relative" class="d-flex justify-content-center">
                    <button type="button" class="btn btn-secondary muteBtn bmd-btn-fab">
                        <i class="material-icons">mic</i>
                    </button>
                    <button type="button" class="btn btn-danger endCallBtn bmd-btn-fab mx-3">
                        <span><i class="material-icons">call_end</i></span>
                    </button>
                </div>
            </div>
        </div>
        <div class="text-center">
            <button type="button" class="btn btn-primary startCallBtn btn-raised mt-5" disabled>
                Start Video Call
            </button>
            <button id="logout" type="button" class="btn btn-primary startCallBtn btn-raised mt-5" disabled>
                Leave
            </button>
        </div>
    </div>
    <div class="modal fade remoteAccountModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Invite to start a call</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group mt-4">
                        <input type="email" class="form-control remoteAccountField" placeholder="Enter your peer's account here">
                        <div class="invalid-feedback">
                            Valid account should be a non-empty numeric value.
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary callBtn btn-raised ml-1">
                        <span><i class="material-icons align-middle mr-2">call</i></span>Call
                    </button>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div class="modal fade callingModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body text-center mt-3">
                    <h3 class="callee">
                    </h3>
                    <p class="status">Calling...</p>
                </div>
                <div class="modal-footer d-flex justify-content-center mb-3">
                    <button type="button" class="btn btn-danger endBtn bmd-btn-fab">
                        <i class="material-icons">call_end</i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade calledModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body text-center mt-3">
                    <h3 class="caller">
                    </h3>
                    <p>Calling...</p>
                </div>
                <div class="modal-footer d-flex justify-content-center mb-3">
                    <button type="button" class="btn btn-danger declineBtn bmd-btn-fab mr-3">
                        <span><i class="material-icons">call_end</i></span>
                    </button>
                    <button type="button" class="btn btn-primary acceptBtn bmd-btn-fab">
                        <span><i class="material-icons">call</i></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
